<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- bootstrap-validator -->
    <link rel="stylesheet" href="./assets/plugins/bootstrap-validator/bootstrapValidator.min.css">

    <!-- city-picker -->
    <link rel="stylesheet" href="./assets/plugins/city-picker/city-picker.css">

    <!-- mui -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/ContactAdd.less" />
</head>

<body>
    <!-- 信息编辑 -->
    <div class="info">
        <h3 class="title wow fadeInUp">信息编辑</h3>

        <p class="desc wow fadeInUp" data-wow-delay="200ms" style="color: #fff;">
            您可在本页编辑联系人的联系信息，编辑成功后名片会被修改。
        </p>
    </div>

    <form id="ContactEdit" class="contact wow fadeInUp" data-wow-delay="300ms">
        <div class="form-group">
            <label for="nickname">姓名</label>
            <input type="text" name="name" class="form-control" id="nickname" placeholder="请输入姓名" required />
        </div>

        <div class="form-group">
            <label for="phone">手机</label>
            <input type="text" name="mobile" class="form-control" id="phone" placeholder="请输入手机" required />
        </div>

        <div class="form-group">
            <label for="gender">性别</label>
            <select class="form-control" id="gender">
                <option value="0">保密</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>

        <div class="form-group" style="position:relative;">
            <label for="c-city">地区</label>
            <input id="c-city" class="form-control" data-toggle="city-picker" name="row[city]" type="text" readonly />
        </div>

        <div class="form-group">
            <label for="type">分类</label>
            <select class="form-control" id="typeid">
                <option value="0">请选择</option>
            </select>
        </div>

        <div class="form-group">
            <label for="remark">备注</label>
            <input type="text" class="form-control" id="remark" placeholder="请输入备注" />
        </div>

        <div class="action">
            <button class="btn">提交</button>
        </div>
    </form>
</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- bootstrap-validator -->
<script src="./assets/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- cookie -->
<script src="./assets/plugins/cookie.js"></script>

<!-- 引入接口插件+封装请求的方法 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- city-picker -->
<script src="./assets/plugins/city-picker/city-picker.data.min.js"></script>
<script src="./assets/plugins/city-picker/city-picker.min.js"></script>

<script src="./assets/plugins/helpers.js"></script>

<script>
    //实例化wow.js
    new WOW().init()

    let business = cookie.get("business");

    let cardid = getParams("cardid")

    console.log(cardid);

    try {
        business = JSON.parse(business);
    } catch (error) {
        business = {};
    };

    (async () => {
        let result = await POST({
            url: "/card/card/type"
        })

        if (result.code == 1) {
            mui.toast(result.msg);

            // console.log(result)

            for (let val of result.data) {
                $("#typeid").append(`<option value="${val.id}">${val.name}</option>`);
            }
        }
    })();

    (async () => {

        let params = {
            businessid: business.id,
            cardid,
        }

        let result = await POST({
            url: "/card/card/check",
            params,
        })

        if (result.code == 1) {
            console.log(result);
            console.log(typeof result.data.province);

            $("#nickname").val(result.data.nickname);
            $("#phone").val(result.data.mobile);
            $("#gender").val(result.data.gender);
            $("#c-city").citypicker("reset");
            $("#c-city").citypicker("destroy");
            $("#c-city").citypicker({
                province: result.data.province_text,
                city: result.data.city_text,
                district: result.data.district_text,
            });
            $("#typeid").val(result.data.typeid);
            $("#remark").val(result.data.remark);

            mui.toast(result.msg);

        } else {
            mui.toast(result.msg);
        }
    })();

    // 实例化表单验证器
    $("#ContactEdit")
        .bootstrapValidator({
            // 全体验证配置项
            message: "表单内容不能为空",
            // 图标
            feedbackIcons: {
                /*input状态样式图片*/
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh",
            },
            // 需验证字段
            fields: {
                // input的name名
                name: {
                    validators: {
                        notEmpty: {
                            message: "手机号不能为空",
                        },
                    },
                },
                mobile: {
                    validators: {
                        notEmpty: {
                            message: "手机号不能为空",
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: "用户名必须是11位数字",
                        },
                        regexp: {
                            regexp: /^1[3-9]\d{9}$/,
                            message: "手机号错误",
                        },
                    },
                },
            },
        })
        // bootstrapvvalidator自定义事件
        .on("success.form.bv", function (e) {
            // 阻止多次提交，提交之后按钮就取消掉默认的提交功能了
            e.preventDefault();
        });


    $("#ContactEdit").submit(async function (e) {

        if (!$('#ContactEdit').data('bootstrapValidator').isValid()) {
            return false;
        }

        e.preventDefault();

        let typeid = $.trim($('#typeid').val());
        console.log(typeid)

        if (!typeid || typeid == 0) {
            mui.toast("请选择分类")
            console.log("请选择分类")

            return false;
        }

        let data = {
            cardid,
            businessid: business.id,
            nickname: $.trim($("#nickname").val()),
            mobile: $.trim($("#phone").val()),
            gender: $.trim($("#gender").val()),
            typeid,
            remark: $.trim($("#remark").val()),
        }

        var citypicker = $("#c-city").data("citypicker");
        // console.log(citypicker)

        var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");
        data.region = code

        // console.log(data);

        let result = await POST(
            {
                url: "/card/card/edit",
                params: data,
            }
        );

        if (result.code == 1) {
            mui.toast(result.msg);

            console.log(result)

            setTimeout(() => {
                history.go(-1)
            }, 2000)
        } else {
            mui.toast(result.msg);

            console.log("录入失败" + result)

            return false;
        }
    })


</script>